<template>
  <!-- 右侧 Begin -->
  <el-col :xl="8" :lg="8" :md="9" :sm="24" :xs="24" class="affix-box">
    <div class="w-100% flex flex-col">
      <!-- 个人信息 Begin -->
      <KoiAuthor></KoiAuthor>
      <!-- 个人信息 End -->

      <!-- 最近更新 Begin -->
      <KoiRecent></KoiRecent>
      <!-- 最近更新 End -->

      <!-- 注意使用el-affix 设置 target 属性，让固钉始终保持在容器内，必须放置最外层父div中，才会有效果 -->
      <el-affix target=".affix-box" :offset="86" class="<sm:hidden">
        <!-- 文章类别 Begin -->
        <KoiCategory></KoiCategory>
        <!-- 文章类别 End -->

        <!-- 文章标签 Begin -->
        <KoiTag></KoiTag>
        <!-- 文章标签 End -->
      </el-affix>
    </div>
  </el-col>
  <!-- 右侧 End -->
</template>

<script setup lang="ts">
import KoiAuthor from "./Author.vue";
import KoiRecent from "./Recent.vue";
import KoiCategory from "./Category.vue";
import KoiTag from "./Tag.vue";
</script>

<style scoped></style>
